<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Dynatree - Example</title>

    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script src="js/jquery.dynatree.js" type="text/javascript"></script>

    <link href="css/dynatree/ui.dynatree.css" rel="stylesheet" type="text/css">


    <!-- (Irrelevant source removed.) -->

    <script type="text/javascript">
        var isReady = false;
        var treeType = 'single';
        var defaultSelection = "";

        function setDefault(val)
        {
            defaultSelection = val;
            if(isReady && defaultSelection != "")
            {
                $("#tree").dynatree("getTree").activateKey(defaultSelection);
                $("#tree2").dynatree("getTree").activateKey(defaultSelection);
            }
        }

        function changeTreeType(type)
        {
            treeType = type;
            if(type == 'single')
            {
                $('#tree, #pTree1').css('display', 'block');
                $('#tree2, #pTree2').css('display', 'none');

            }
            else
            {
                $('#tree, #pTree1').css('display', 'none');
                $('#tree2, #pTree2').css('display', 'block');
            }
        }

        var html=[];
        $(document).ready(function () {
            parsePMPlant();
        });

        function processKids(obj){

            if( $(this).children().length>0 ){
                html.push('<li class="folder" id="' + $(this).attr('name') + '">'+$(this).attr('text'));
            }
            else
            {
                html.push('<li id="' + $(this).attr('name') + '">'+$(this).attr('text'));
            }
            if( $(this).children().length>0 ){
                html.push('<ul>');
                $(this).children().each(processKids);
                html.push('</ul>');
            }else{
                html.push('</li>');
            }
        }




        function parsePMPlant()
        {
            $.ajax({
                type: "GET",
                url: "data/pm_plant.xml",
                dataType: "xml",
                success: function(xml) {
                    html.push('<ul>')
                    $(xml).children().find('node:first').each(processKids);
                    html.push('</ul>');
                    $('#tree').html(html.join(""));
                    $('#tree2').html(html.join(""));
                    initializeTree();
                }
            });
        }

        function getPlant()
        {
            if(treeType == 'single')
            {
                var node = $("#tree").dynatree("getActiveNode");
                return node.data.key + ":" + node.data.title;
            }
            else
            {
                // Display list of selected nodes
                var selNodes = $("#tree2").dynatree("getSelectedNodes");
                // convert to title/key array
                var selKeys = $.map(selNodes, function(node){
                    return node.data.key + ":" + node.data.title;
                });
                return selKeys.join(";");
            }
        }

        function initializeTree()
        {
            $(function(){
                // Initialize the tree inside the <div>element.
                // The tree structure is read from the contained <ul> tag.
                $("#tree").dynatree({
                    title: "Programming Sample",
                    onActivate: function(node) {
                        $("#echoActive").text(node.data.title);
                        if( node.data.url )
                            window.open(node.data.url, node.data.target);
                        window.top.adminAreaGotChangedFromChild();
                    },
                    onDeactivate: function(node) {
                        $("#echoSelected").text("-");
                    },
                    onSelect: function(select, node) {
                        // Display list of selected nodes
                        var selNodes = node.tree.getSelectedNodes();
                        // convert to title/key array
                        var selKeys = $.map(selNodes, function(node){
                            return node.data.key + ":" + node.data.title;
                        });
                        //alert(selKeys.join(";"));
                    },
                    onFocus: function(node) {
                        $("#echoFocused").text(node.data.title);
                        window.top.adminAreaGotChangedFromChild();
                    }
                });

                $("#btnActiveNode").click(function(){
                    $("#tree").dynatree("getTree").activateKey(defaultSelection);
                });

                $("#btnCollapseAll").click(function(){
                    $("#tree").dynatree("getRoot").visit(function(node){
                        node.expand(false);
                    });
                    return false;
                });
                $("#btnExpandAll").click(function(){
                    $("#tree").dynatree("getRoot").visit(function(node){
                        node.expand(true);
                    });
                    return false;
                });
            });






            $(function(){
                // Initialize the tree2 inside the <div>element.
                // The tree2 structure is read from the contained <ul> tag.
                $("#tree2").dynatree({
                    checkbox: true,
                    selectMode: 2,
                    title: "Programming Sample",
                    onActivate: function(node) {
                        $("#echoActive").text(node.data.title);
                        if( node.data.url )
                            window.open(node.data.url, node.data.target);
                        window.top.adminAreaGotChangedFromChild();
                    },
                    onDeactivate: function(node) {
                        $("#echoSelected").text("-");
                    },
                    onSelect: function(select, node) {
                        // Display list of selected nodes
                        var selNodes = node.tree.getSelectedNodes();
                        // convert to title/key array
                        var selKeys = $.map(selNodes, function(node){
                            return node.data.key + ":" + node.data.title;
                        });
                        //alert(selKeys.join(";"));
                    },
                    onFocus: function(node) {
                        $("#echoFocused").text(node.data.title);
                        window.top.adminAreaGotChangedFromChild();
                    }
                });

                $("#btnActiveNode2").click(function(){
                    $("#tree2").dynatree("getTree").activateKey(defaultSelection);
                });

                $("#btnCollapseAll2").click(function(){
                    $("#tree2").dynatree("getRoot").visit(function(node){
                        node.expand(false);
                    });
                    return false;
                });
                $("#btnExpandAll2").click(function(){
                    $("#tree2").dynatree("getRoot").visit(function(node){
                        node.expand(true);
                    });
                    return false;
                });
            });

            changeTreeType('single');
            isReady = true;
            setDefault(window.top.getDefaultFromChild());



        }

    </script>
</head>

<body>
<div id="tree">
</div>
<div id="tree2">
</div>
<p id="pTree1">
    <a href="#" id="btnExpandAll">Expand all</a> -
    <a href="#" id="btnCollapseAll">Collapse all</a> -
    <a href="#" id="btnActiveNode">Activate Default</a>
</p>

<p id="pTree2">
    <a href="#" id="btnExpandAll2">Expand all</a> -
    <a href="#" id="btnCollapseAll2">Collapse all</a> -
    <a href="#" id="btnActiveNode2">Activate Default</a>
</p>
</body>
</html>